<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/first' }">首页：</el-breadcrumb-item>
      <el-breadcrumb-item>人事管理</el-breadcrumb-item>
      <el-breadcrumb-item>合同管理</el-breadcrumb-item>
    </el-breadcrumb>
    <br />
    <!-- 信息、添加列表切换 -->
    <el-row>
      <el-button type="primary" plain @click="show(1)">合同信息</el-button>
      <el-button type="success" plain @click="show(2)">添加合同</el-button>
    </el-row>
    <br />
    <!-- 查询 -->
    <!-- 合同信息 -->
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      v-show="isShow1"
    >
      <el-form-item label="员工姓名：">
        <el-input
          v-model="formInline.xingming"
          placeholder="请输入员工姓名"
        ></el-input>
      </el-form-item>
      <el-form-item label="其它查询：">
        <el-select v-model="formInline.qita" placeholder="全部合同信息">
          <el-option label="全部合同信息" value="0"></el-option>
          <el-option label="已到期" value="1"></el-option>
          <el-option label="续约中" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handlequery()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="contractData" style="width: 100%" border v-show="isShow1">
      <el-table-column prop="Pld" label="纸质合同编号"> </el-table-column>
      <el-table-column prop="UserName" label="员工姓名"> </el-table-column>
      <el-table-column prop="SignTime" label="签约时间">
        <template slot-scope="scope">
          {{ scope.row.SignTime | filterTime }}
        </template>
      </el-table-column>
      <el-table-column prop="StartTime" label="合同生效时间">
        <template slot-scope="scope">
          {{ scope.row.StartTime | filterTime }}
        </template>
      </el-table-column>
      <el-table-column prop="EndTime" label="合同到期时间">
        <template slot-scope="scope">
          {{ scope.row.EndTime | filterTime }}
        </template>
      </el-table-column>
      <el-table-column prop="HTStatus" label="合同状态"> </el-table-column>
      <el-table-column label="操作" width="180px">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="contractdel(scope.row.ContractId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加合同 -->
    <el-form
      ref="form"
      :model="form"
      label-width="120px"
      style="width: 700px; position: relative; left: 285px"
      v-show="isShow2"
    >
      <el-form-item label="纸质合同编号：">
        <el-input v-model="form.bianhao"></el-input>
      </el-form-item>
      <el-form-item label="员工工号：">
        <el-input v-model="form.gonghao"></el-input>
      </el-form-item>
      <el-form-item label="签约时间：">
        <el-col>
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="form.date1"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="合同生效时间：">
        <el-col>
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="form.date2"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="合同到期时间：">
        <el-col>
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="form.date3"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addok">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
import Qs from "../../node_modules/qs";
import moment from "moment";
export default {
  // 时间格式化
  filters: {
    filterTime(val) {
      return moment(val).format("YYYY-MM-DD HH:mm:ss");
    },
  },
  data() {
    return {
      isShow1: true, // 信息显示
      isShow2: false, // 添加隐藏
      // 合同信息
      formInline: {
        xingming: "", // 员工姓名
        qita: "", // 其它查询
      },
      // 添加合同
      form: {
        bianhao: "", // 纸质合同编号
        gonghao: "", // 员工工号
        date1: "", // 签约时间
        date2: "", // 合同生效时间
        date3: "", // 合同到期时间
      },
      contractData: [], // 合同信息列表
    };
  },
  methods: {
    // 刷新
    reshow() {
      let that = this;
      axios({
        method: "get",
        url: "http://127.0.0.1:9090/allcontract",
      }).then(function (res) {
        that.contractData = res.data.data;
      });
    },
    // 清空
    empty() {
      this.form.bianhao = "";
      this.form.gonghao = "";
      this.form.date1 = "";
      this.form.date2 = "";
      this.form.date3 = "";
    },
    // 信息、添加列表切换
    show(e) {
      if (e == 1) {
        this.isShow1 = true;
        this.isShow2 = false;
        this.reshow();
      } else {
        this.isShow1 = false;
        this.isShow2 = true;
      }
    },
    // 模糊查询合同信息
    handlequery() {
      let that = this;
      let params = {
        name: this.formInline.xingming,
        hetong: this.formInline.qita,
      };
      axios({
        method: "post",
        url: "http://127.0.0.1:9090/searchcontract",
        data: Qs.stringify(params),
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
      }).then(function (res) {
        that.contractData = res.data.data;
      });
    },
    // 添加合同
    addok() {
      let that = this;
      let signhour = new Date(this.form.date1).toLocaleDateString();
      let starthour = new Date(this.form.date2).toLocaleDateString();
      let endhour = new Date(this.form.date3).toLocaleDateString();
      axios({
        method: "post",
        url: "http://127.0.0.1:9090/addcontract",
        data: {
          htobj: {
            usergh: this.form.bianhao, //合同编号
            pid: this.form.gonghao, //签约人
            signtime: signhour,
            starttime: starthour,
            endtime: endhour,
            htstatus: "续约中",
          },
        },
      }).then(function (res) {
        if (res.data.state == 1) {
          alert("添加成功");
          that.empty();
        } else {
          alert("添加失败");
          that.empty();
        }
      });
    },
    // 删除合同
    contractdel(id) {
      let that = this;
      axios({
        method: "get",
        url: `http://127.0.0.1:9090/delcontract?id=${id}`,
      }).then(function (res) {
        if (res.data.state == 1) {
          alert("删除成功");
          that.reshow();
        } else {
          alert("合同未到期，删除失败");
        }
        that.reshow();
      });
    },
  },
  created() {
    this.reshow();
  },
};
</script>

<style scoped>
/* 列表切换、模糊查询左对齐 */
.el-row,
.el-form {
  text-align: left;
}
.el-form-item__label {
  text-align: left !important;
}
</style>